<template>
  <div>
    <h1>计算器</h1>
    <!-- ctrl+p搜索文件
        ctrl+F
    -->
    <!-- 在vue中如何绑定事件  v-on  @ -->
    <input type="text" v-model="num1" />
    <input type="text" v-model="num2" />
    <button v-on:click="add">+</button>
    <button @click="dis">-</button>
    <button @click="cheng(10,8,$event)">*</button>
    <button @click="chu">/</button>
    <p>{{result}}</p>
    <!-- 在一个元素上绑定多个事件 -->
    <!-- 多个相同事件,在v-on/@后面的引号中多个函数名用逗号或者分号分割，函数加小括号 -->
    <div class="box" v-on:click="test1();test2();test3()"></div>
    <!-- 多个不同事件  v-on/@a使用对象，对象的属性名事件名，属性值是methods中的函数名 -->
    <div class="box1" v-on="{click:test2,mousemove:test1}"></div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      num1: 0,
      num2: 0,
      result: 0
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    add() {
      // this是当前组件对象，在newVue配置对象中的methods中this是当前vm实例对象，在组件中this指当前组件对象
      //   console.log(this);
      console.log(typeof this.num1);
      // 时时刻刻注意收集到的数据类型
      //input框收集到的数据是字符串，做运算需要隐式转换
      this.result = this.num1 * 1 + this.num2 * 1;
    },
    dis() {
      this.result = this.num1 * 1 - this.num2 * 1;
    },
    // 函数名 加括号 不加括号的区别
    /* 
    v-on绑定事件
    回调函数有扩号 可以传参，但是使用event时必须在括号中出入$event
    回调函数无扩号 不能传参，在methods中的回调函数直接出入event，即可使用
    
    v-on  @绑定事件
    click change mousemove mouseleave mouseout mouseenter mousedown mouseup ..
    keyup
    keydown
    focus
    blur
    dbclick




    */
    cheng(n, m, event) {
      console.log(event);
      this.result = n * m;
    },
    chu(event) {
      console.log(event);
    },
    test1() {
      console.log("第一次点击");
    },
    test2() {
      console.log("第二次点击");
    },
    test3() {
      console.log("第san次点击");
    }
  },

  watch: {}
};
</script>
<style lang="less">
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: green;
}
</style>